<template>
	<view>
		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000"
			backState="2000">
			<view slot="left">
				<image style="width: 60rpx;height: 60rpx;margin-left: 20rpx;margin-top: 15rpx;"
					src="https://qykh.shopec.com.cn/image-server/dz/home_avator.png" mode="aspectFill"
					@click="showMember = !showMember"></image>
			</view>
			<view class="title-box"><text>工作台</text></view>
		</z-nav-bar>

		<view style="margin-top: 30rpx;">
			<!-- 待办事项 -->
			<view class="homeBox" v-if="financialManagementList.includes('1')">
				<view class="flex-row-center">
					<image class="img" src="/static/worktable/home_dbmark.png" mode="aspectFill"></image>
					<text style="flex: 1;" class="title">待办事项</text>

					<LiuBubbleMenu elementId="plat-more" :dataList="sourceList.map(item=>item.dictLabel)"
						@change="platChange">
						<view id="plat-more" class="flex-row-center" style="justify-content: flex-end;">
							<!-- <image @click="changePlat(0)" class="markIcon" src="/static/other/arrow_step1.png" mode="aspectFill"></image> -->
							<text class="order_plat">
								{{ sourceList != null && sourceList.length > 0 ? sourceList[selIndex].dictLabel : '全部' }}
							</text>
							<u-icon name="arrow-right"></u-icon>
							<!-- <image @click="changePlat(1)" class="markIcon" src="/static/other/arrow_step2.png" mode="aspectFill"></image> -->
						</view>
					</LiuBubbleMenu>
				</view>
				<view style="margin-top: 15rpx;">
					<u-grid :col="4" :border="false">
						<u-grid-item v-for="(item, index) in dbData" :key="index" @click="dbOrderClick(item)">
							<view class="dbItem flex-colum-center">
								<text class="count">{{ item.count }}</text>
								<text class="title">{{ item.title }}</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<!-- 风险预警 -->
			<view class="homeBox" v-if="financialManagementList.includes('4')">
				<view class="flex-row-center">
					<image class="img" src="/static/worktable/home_fxyjmark.png" mode="aspectFill"></image>
					<text class="title">风险预警</text>
				</view>
				<view style="margin-top: 15rpx;">
					<u-grid :col="2" :border="false">
						<u-grid-item v-for="(item, index) in fxyjData" :key="index" @click="fxyjItemClick(item)">
							<view class="fxyjItem flex-colum-center">
								<text class="count">{{ item.count }}</text>
								<text class="title">{{ item.title }}</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<!-- 订单统计 -->
			<view class="homeBox" v-if="financialManagementList.includes('2')">
				<view class="flex-row-center-sb">
					<view class="flex-row-center">
						<image class="img" src="/static/worktable/home_orderMark.png" mode="aspectFill"></image>
						<text class="title">订单统计</text>
					</view>

					<view class="subsectionBox flex-row-center">
						<view class="tabItem" :class="{ active: statisticsIndex == item.code }"
							v-for="(item, index) in statisticsTabs" :key="index" @click="changeTab(item)">
							{{ item.title }}
						</view>
					</view>
				</view>
				<view style="margin-top: 32rpx;background-color: #F1F6FF;border-radius: 8rpx;">
					<u-grid :col="3" :border="true">
						<u-grid-item v-for="(item, index) in tjData" :key="index">
							<view class="tjItem flex-colum-center">
								<text class="title">{{ item.title }}</text>
								<text class="value" style="font-size: 28rpx;">{{ item.value }}</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<!-- 车辆排班 -->
			<view class="homeBox" v-if="financialManagementList.includes('5')">
				<view class="flex-row-center-sb" @click.stop="goPaiBan">
					<view class="flex-row-center">
						<image class="img" src="/static/worktable/home_pbMark.png" mode="aspectFill"></image>
						<text class="title">车辆排班</text>
					</view>
					<view class="flex-row-center">
						<text class="title" style="color: #666;font-size: 24rpx;">查看图表</text>
						<u-icon name="arrow-right" size="15"></u-icon>
					</view>
				</view>

				<view style="margin-top: 15rpx;">
					<u-grid :col="3" :border="false">
						<u-grid-item v-for="(item, index) in pbData" :key="index" @click="pbItemClick(index)">
							<view class="pbItem flex-colum-center">
								<text class="count">{{ item.count }}</text>
								<text class="title">{{ item.title }}</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<!-- 常用工具 -->
			<view class="homeBox" v-if="financialManagementList.includes('3')">
				<view class="flex-row-center">
					<image class="img" src="/static/worktable/home_toolsMark.png" mode="aspectFill"></image>
					<text class="title">常用工具</text>
				</view>
				<view style="margin-top: 10rpx;">
					<u-grid :col="3" :border="false">
						<u-grid-item v-for="(item, index) in datalist" :key="index" @click="businessClick(item.code)">
							<view class="toolItem flex-colum-center">
								<image class="img" :src="item.icon" mode="aspectFill"></image>
								<text class="title">{{ item.title }}</text>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>

		<!-- 侧边栏 -->
		<u-popup :show="showMember" @close="showMember = false" mode="left">
			<view class="popContainer">
				<view class="topBox">
					<image style="width: 128rpx;height: 128rpx;"
						src="https://qykh.shopec.com.cn/image-server/dz/home_avator.png" mode="aspectFill"></image>
					<view class="memberInfo flex-colum-center">
						<text style="font-size: 32rpx;margin-bottom: 16rpx;">{{ memberInfo.name }}</text>
						<text>{{ memberInfo.roleName }}</text>
					</view>
				</view>
				<view class="otherBox">
					<view class="itemContent">
						<text>手机号</text>
						<text>{{ memberInfo.phone }}</text>
					</view>
					<view class="itemContent">
						<text>归属部门</text>
						<text>{{ memberInfo.deptName }}</text>
					</view>
					<view class="itemContent">
						<text>归属门店</text>
						<text>{{ memberInfo.storeName }}</text>
					</view>
					<view class="itemContent">
						<text>角色</text>
						<text>{{ memberInfo.roleName }}</text>
					</view>
					<view class="itemContent">
						<text>创建时间</text>
						<text>{{ memberInfo.createTime }}</text>
					</view>
				</view>

				<view class="loginOut"><u-button plain text="退出登录" @click="clickLoginOut"></u-button></view>
			</view>
		</u-popup>

		<!-- 确认退出登录弹框 -->
		<u-modal title="提示" content="您确定退出登录吗?" :show="showLoginOut" showCancelButton @confirm="confirmLoginOut"
			@cancel="showLoginOut = false"></u-modal>

		<!-- 底部导航 -->
		<HomeTabbar :tab="tabIndex"></HomeTabbar>

	</view>
</template>

<script>
	import HomeTabbar from '@/components/tabbar/tabbar';
	import LiuBubbleMenu from '@/components/liu-bubble-menu.vue';
	import {
		apiProfile
	} from '@/api/login-api.js'
	import * as orderApi from '@/api/order-api.js';
	import * as illegalApi from '@/api/illegal-api.js'
	import {
		dictdatatype
	} from '@/api/car-api.js';
	import {
		pbStatistics
	} from '@/api/home-api.js';
	export default {
		components: {
			HomeTabbar,
			LiuBubbleMenu
		},
		data() {
			return {
				offsetTop: 0,
				selIndex: 0,
				config: {
					title: '工作台',
					color: '#fff',
					fontSize: '16px',
					leftSlot: true,
					leftSlotSwitch: true,
					back: false,
					backgroundColor: [1, ['#3699ff', '#0075ee']],
					statusBarFontColor: '#ffffff'
				},
				showMember: false,
				showLoginOut: false,
				memberInfo: {},
				statisticsIndex: 2,
				statisticsTabs: [{
						title: '本周',
						code: 1
					},
					{
						title: '本月',
						code: 2
					},
					{
						title: '本年',
						code: 3
					},

				],
				// 待办事项
				dbData: [{
						count: 0,
						title: '全部',
						status: 1,
						otaKey: 1
					},
					{
						count: 0,
						title: '待排车',
						status: 4,
						otaKey: 2
					},
					{
						count: 0,
						title: '待取车',
						status: 5,
						otaKey: 3
					},
					{
						count: 0,
						title: '用车中',
						status: 6,
						otaKey: 4
					},
					{
						count: 0,
						title: '2小时内待取车',
						status: 12,
						otaKey: 9
					},
					{
						count: 0,
						title: '2小时内待还车',
						status: 14,
						otaKey: 10
					},
					{
						count: 0,
						title: '逾期未取车',
						status: 15,
						otaKey: 11
					},
					{
						count: 0,
						title: '逾期未还车',
						status: 16,
						otaKey: 12
					},
					{
						count: 0,
						title: '今日待取车',
						status: 11,
						otaKey: 7
					},
					{
						count: 0,
						title: '今日待还车',
						status: 13,
						otaKey: 8
					},
					{
						count: 0,
						title: '明日待取车',
						status: 111,
						otaKey: 5
					},
					{
						count: 0,
						title: '明日待还车',
						status: 131,
						otaKey: 6
					}
				],
				// 风险预警
				fxyjData: [{
						count: 0,
						title: '未处理违章',
						code: 1
					},
					{
						count: 0,
						title: '超15天未处理违章',
						code: 3
					},
					{
						count: 0,
						title: '超30天未处理违章',
						code: 4
					},
					{
						count: 0,
						title: '违章预警',
						code: 10
					}
				],
				// 订单统计
				tjData: [{
						value: 0,
						title: '订单数'
					},
					{
						value: 0,
						title: '应收账单'
					},
					{
						value: 0,
						title: '已收账单'
					},
					{
						value: 0,
						title: '应退账单'
					},
					{
						value: 0,
						title: '已退账单'
					},
					{
						value: 0,
						title: '运营收益'
					}
				],
				//排班
				pbData: [{
						count: 0,
						title: '全部车辆',
						code: 1
					},
					{
						count: 0,
						title: '在租车辆',
						code: 2
					},
					{
						count: 0,
						title: '空闲车辆',
						code: 3
					}
				],
				sourceList: [],
			}
		},
		computed: {
			navigationList() {
				return this.$store.state.initData.initData.navigationList || [];
			},
			tabIndex() {
				let tabIndex = 0;
				if (this.navigationList.length > 0) {
					this.navigationList.map((item, index) => {
						if (item.name === "工作台") {
							tabIndex = index;
						}
					})
				}
				// #ifdef APP
				return tabIndex + 1;
				// #endif
				// #ifdef MP-WEIXIN
				return tabIndex;
				// #endif
			},
			commonToolsList() {
				return this.$store.state.initData.initData.commonToolsList || [];
			},
			financialManagementList() {
				let arr=[]
				let list = this.$store.state.initData.initData.financialManagementList || [];
				if(list.length>0){
					arr = list.map(item => {
						return item.id
					})
				}
				
				return arr;
			},
			datalist() {
				var datalist = [];
				for (let item of this.commonToolsList) {
					switch (Number(item.id)) {
						case 1:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool1.png',
								title: '新增日租订单',
								code: 1
							})
							break;
						case 2:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool2.png',
								title: '新增车辆',
								code: 2
							})
							break;
						case 3:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool3.png',
								title: '新增客户',
								code: 3
							})
							break;
						case 4:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool4.png',
								title: '新增借入车辆',
								code: 4
							})
							break;
						case 5:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool5.png',
								title: '新增借出车辆',
								code: 5
							})
							break;
						case 6:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool6.png',
								title: '新增同行',
								code: 6
							})
							break;
						case 7:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool7.png',
								title: '客户管理',
								code: 7
							})
							break;
						case 8:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool8.png',
								title: '借调车辆管理',
								code: 8
							})
							break;
						case 9:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool9.png',
								title: '同行管理',
								code: 9
							})
							break;
						case 10:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool10.png',
								title: '违章查询',
								code: 10
							})
							break;

						case 11:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool11.png',
								title: '违章管理',
								code: 11
							})
							break;
						case 12:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool12.png',
								title: '新增加油记录',
								code: 12
							})
							break;
						case 13:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool13.png',
								title: '加油管理',
								code: 13
							})
							break;
						case 14:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool14.png',
								title: '新增车价方案',
								code: 14
							})
							break;
						case 15:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool15.png',
								title: '车价管理',
								code: 15
							})
							break;
						case 16:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool16.png',
								title: 'OTA订单管理',
								code: 16
							})
							break;
						case 17:
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool2.png',
								title: 'OTA库存管理',
								code: 17
							})
							break;
						case 19://付款申请
							datalist.push({
								icon: 'https://qykh.shopec.com.cn/image-server/dz/home_tool19.png',
								title: '付款申请',
								code: 19
							})
							break;
					}
				}




				return datalist;
			}
		},
		onShow() {
			this.getRiskWarning();
			this.revenueRankingApi(2);
			this.getPlat();
			this.getPbStatistics();
		},
		onReady() {
			// #ifdef APP-PLUS||MP-ALIPAY
			uni.hideTabBar()
			// #endif
		},
		onLoad() {
			//获取手机状态栏高度
			this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750 * uni.getSystemInfoSync()
				.windowWidth) - 0.5;
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			
			this.getMemberInfo();
		},
		
		methods: {
			
			platChange(e) {
				console.log('选中了', e);
				this.selIndex = this.sourceList.findIndex(item => item.dictLabel == e)
				this.getCountData();
			},
			getPlat() {
				dictdatatype('ota_order_resource').then(res => {
					this.sourceList = [{
							dictLabel: "平台订单",
							dictValue: "pc"
						},
						{
							dictLabel: "全部订单",
							dictValue: "all"
						},
						...res.data
					]

					this.getCountData();
				})
			},
			changePlat(index) {
				if (0 === index) {
					if (this.selIndex - 1 < 0) {
						this.selIndex = 0
					} else {
						this.selIndex--
					}
				} else if (1 == index) {
					if (this.selIndex + 1 >= this.sourceList.length) {
						this.selIndex = this.sourceList.length - 1
					} else {
						this.selIndex++
					}
				}

				this.getCountData();

			},

			getCountData() {
				let type = 1

				if (this.selIndex === 0) {
					type = 1;
				} else if (this.selIndex === 1) {
					type = 0;
				} else {
					type = 2
				}

				this.orderCount(this.sourceList[this.selIndex].dictValue, type);
			},

			// 获取待办事项统计数据
			orderCount(orderSource, orderType) {
				orderApi.workbenchgetOrderData({
					orderSource,
					orderType
				}).then(res => {
					let orderCount = res.data
					this.dbData = [{
							count: orderCount.allOrder || 0,
							title: '全部',
							status: 1,
							otaKey: 1
						},
						{
							count: orderCount.pc || 0,
							title: '待排车',
							status: 4,
							otaKey: 2
						},
						{
							count: orderCount.qc || 0,
							title: '待取车',
							status: 5,
							otaKey: 3
						},
						{
							count: orderCount.yc || 0,
							title: '用车中',
							status: 6,
							otaKey: 4
						},
						{
							count: orderCount.twohqc || 0,
							title: '2小时内待取车',
							status: 12,
							otaKey: 9
						},
						{
							count: orderCount.twohhc || 0,
							title: '2小时内待还车',
							status: 14,
							otaKey: 10
						},
						{
							count: orderCount.yqwq || 0,
							title: '逾期未取车',
							status: 15,
							otaKey: 11
						},
						{
							count: orderCount.yqwh || 0,
							title: '逾期未还车',
							status: 16,
							otaKey: 12
						},
						{
							count: orderCount.jrqc || 0,
							title: '今日待取车',
							status: 11,
							otaKey: 7
						},
						{
							count: orderCount.jrhc || 0,
							title: '今日待还车',
							status: 13,
							otaKey: 8
						},
						{
							count: orderCount.tomorrowTakeCar || 0,
							title: '明日待取车',
							status: 111,
							otaKey: 5
						},
						{
							count: orderCount.tomorrowReturnCar || 0,
							title: '明日待还车',
							status: 131,
							otaKey: 6
						}
					]
			
				})
			},
			// 获取风险预警统计数据
			getRiskWarning() {
				illegalApi.riskWarning().then(res => {
					let data = res.data;
					this.fxyjData = [{
							count: data.unhandled || 0,
							title: '未处理违章',
							code: 1
						},
						{
							count: data.fifteen || 0,
							title: '超15天未处理违章',
							code: 3
						},
						{
							count: data.thirty || 0,
							title: '超30天未处理违章',
							code: 4
						},
						{
							count: data.earlyWarning || 0,
							title: '违章预警',
							code: 10
						}
					]
				})
			},

			// 获取订单统计数据
			revenueRankingApi(dateType) {
				orderApi.revenueRankingApi({
					dateType: dateType
				}).then(res => {
					let revenueCount = res.data
					this.tjData = [{
							value: revenueCount.orderNum || 0,
							title: '订单数'
						},
						{
							value: revenueCount.receivable || 0,
							title: '应收账单'
						},
						{
							value: revenueCount.toReceive || 0,
							title: '已收账单'
						},
						{
							value: revenueCount.payable || 0,
							title: '应退账单'
						},
						{
							value: revenueCount.toPayable || 0,
							title: '已退账单'
						},
						{
							value: revenueCount.total || 0,
							title: '运营收益'
						}
					];
				})
			},

			// 订单统计标签发生改变
			changeTab(item) {
				this.statisticsIndex = item.code;
				this.revenueRankingApi(item.code);
			},
			// 待办事项
			dbOrderClick(item) {
				/**
				 * 2、全部订单时，点击无跳转

					3、平台订单时，点击跳转订单待办列表页

					4、其他平台时，点击跳转OTA订单列表并选中相应筛选项
				 */
				if (this.selIndex === 0) {
					uni.navigateTo({
						url: '/workbench/order/shortRentOrder/orderList?status=' + item.status + '&title=' + item
							.title
					})
				} else if (this.selIndex > 1) {
					uni.navigateTo({
						url: '/workbench/ota/otalist?otaPlat=' + this.sourceList[this.selIndex].dictValue +
							'&otakey=' + item.otaKey
					})
				}


			},

			getPbStatistics() {
				pbStatistics().then(res => {
					let pbInfo = res.data;
					this.pbData = [{
							count: pbInfo.all || 0,
							title: '全部车辆',
							code: 1
						},
						{
							count: pbInfo.renting || 0,
							title: '在租车辆',
							code: 2
						},
						{
							count: pbInfo.idle || 0,
							title: '空闲车辆',
							code: 3
						}
					];
				})
			},

			// 常用工具
			businessClick(code) {
				switch (code) {
					case 1: //新增订单
						uni.navigateTo({
							url: '/workbench/order/shortRentOrder/add?type=1'
						})
						break;
					case 2: //新增车辆
						uni.navigateTo({
							url: '/workbench/car/add'
						})
						break;
					case 3: //客户新增
						uni.navigateTo({
							url: '/customer/add'
						})
						break;
					case 4: //新增借入车辆
						uni.navigateTo({
							url: '/workbench/seconded/carIn?type=0'
						})
						break;
					case 5: //新增借出车辆
						uni.navigateTo({
							url: '/workbench/seconded/carOut?type=0'
						})
						break;
					case 6: //新增同行
						uni.navigateTo({
							url: '/workbench/seconded/addPeer'
						})
						break;
					case 7: //客户管理
						uni.navigateTo({
							url: '/customer/list'
						})
						break;
					case 8: //借调车辆管理
						uni.navigateTo({
							url: '/workbench/seconded/secondedList'
						})
						break;
					case 9: //同行管理
						uni.navigateTo({
							url: '/workbench/seconded/peerList'
						})
						break;
					case 10: //违章查询
						uni.navigateTo({
							url: '/workbench/illegal/query'
						})
						break;
					case 11: //违章管理
						uni.navigateTo({
							url: '/workbench/illegal/list?type=0'
						})
						break;
					case 12: //新增加油记录
						uni.navigateTo({
							url: '/workbench/refuel/addRefuelRecord'
						})
						break;
					case 13: //加油管理
						uni.navigateTo({
							url: '/workbench/refuel/refuelRecord'
						})
						break;
					case 14: //新增车价方案
						// uni.navigateTo({
						// 	url: '/workbench/illegal/list?type=0'
						// })
						break;
					case 15: //车价管理
						// uni.navigateTo({
						// 	url: '/workbench/illegal/list?type=0'
						// })
						break;
					case 16: //OTA订单管理
						uni.navigateTo({
							url: '/workbench/ota/otalist'
						})
						break;
					case 17: //OTA库存管理
						uni.navigateTo({
							url: '/workbench/ota/otastoragelist'
						})
						break;
					case 19: //付款申请
						uni.navigateTo({
							url: '/workbench/paymentApply/list'
						})
						break;
					default:
						break;
				}
			},
			// 风险预警item点击事件
			fxyjItemClick(item) {
				// console.log(item.code);
				if (item.code === 10) { //违章预警
					uni.navigateTo({
						url: '/workbench/illegal/warning'
					})
				} else { //违章管理
					uni.navigateTo({
						url: '/workbench/illegal/list?type=' + item.code
					})
				}
			},
			pbItemClick(index) {
				// if(0===index){
				// 	//TODO 写个假入口
				// 	uni.navigateTo({
				// 		url:'/workbench/schedule/carstorage'
				// 	})
				// }
			},

			//排班
			goPaiBan() {
				uni.navigateTo({
					url: '/workbench/schedule/schedule'
				})
			},
			// 获取个人信息
			getMemberInfo() {
				apiProfile().then(res => {
					this.memberInfo = res.data;
					this.$store.commit('user/saveUserInfo', res.data);
				})
			},

			// 退出登录
			clickLoginOut() {
				this.showMember = false;
				this.showLoginOut = true;
			},
			// 确认退出登录
			confirmLoginOut() {
				uni.clearStorageSync();
				this.$store.commit('user/saveIsLogin', false);
				this.$store.commit('user/saveToken', '');
				this.$store.commit('user/saveUserInfo', null);
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.markIcon {
		width: 32rpx;
		height: 32rpx;
	}

	.order_plat {
		margin: 0 5rpx;
		font-size: 28rpx;
		color: #333;
	}

	.homeTop {
		width: 100%;
		height: 550rpx;
		background-image: url('https://qykh.shopec.com.cn/image-server/dz/home_topBg.png');
		background-size: 100% 100%;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
	}

	.homeBox {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx 24rpx;
		margin: 0 20rpx 32rpx;

		.img {
			width: 40rpx;
			height: 40rpx;
			// margin-right: 4rpx;
		}

		.title {
			font-size: 32rpx;
			color: #333;
		}
	}

	.dbItem {
		width: 152rpx;
		height: 120rpx;
		background: #f1f6ff;
		border-radius: 8rpx;
		margin-top: 10rpx;

		.count {
			font-size: 32rpx;
			color: #333;
			margin-top: 20rpx;
		}

		.title {
			font-size: 24rpx;
			color: #666;
			margin-top: 8rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.fxyjItem {
		width: 320rpx;
		height: 120rpx;
		background: #f1f6ff;
		border-radius: 8rpx;
		margin-top: 10rpx;

		.count {
			font-size: 32rpx;
			color: #333;
			margin-top: 20rpx;
		}

		.title {
			font-size: 24rpx;
			color: #666;
			margin-top: 8rpx;
		}
	}

	.tjItem {
		padding-bottom: 20rpx;

		.value {
			font-size: 32rpx;
			color: #333;
			margin-top: 8rpx;
		}

		.title {
			font-size: 24rpx;
			color: #666;
			margin-top: 20rpx;
		}
	}

	.pbItem {
		width: 205rpx;
		height: 120rpx;
		background: #f1f6ff;
		border-radius: 8rpx;
		margin-top: 10rpx;

		.count {
			font-size: 32rpx;
			color: #333;
			margin-top: 20rpx;
		}

		.title {
			font-size: 24rpx;
			color: #666;
			margin-top: 8rpx;
		}
	}

	.subsectionBox {
		border-radius: 22rpx;
		border: 1rpx solid #1673ff80;
		box-sizing: content-box;

		.tabItem {
			width: 108rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			color: #666;
			font-size: 24rpx;
			background: #fff;
			border-radius: 22rpx;

			&.active {
				color: #ffffff;
				background: #1673ff;
			}
		}
	}

	.toolItem {
		margin-top: 20rpx;

		.img {
			width: 132rpx;
			height: 132rpx;
		}

		.title {
			font-size: 24rpx;
			color: #333;
		}
	}

	.popContainer {
		width: 550rpx;

		.topBox {
			padding-top: 136rpx;
			height: 320rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #187ffe;

			.memberInfo {
				margin-top: 30rpx;

				text {
					display: block;
					color: #ffffff;
					font-size: 28rpx;
				}
			}
		}

		.otherBox {
			padding: 40rpx 40rpx 0;

			.itemContent {
				display: flex;
				justify-content: space-between;
				margin: 20rpx 0;

				text {
					color: #333;
					font-size: 28rpx;
				}

				text:nth-child(1) {
					color: #666;
				}
			}
		}

		.loginOut {
			position: absolute;
			bottom: 40rpx;
			left: 20rpx;
			right: 20rpx;
		}
	}

	/deep/ .u-border-bottom {
		border-color: rgba(22, 115, 255, 0.3) !important;
		border-bottom-style: dashed !important;
	}

	/deep/ .u-border-right {
		border-color: rgba(22, 115, 255, 0.3) !important;
		border-right-style: dashed !important;
	}

	/deep/ .u-border-left {
		border-color: rgba(22, 115, 255, 0.3) !important;
		border-left-style: dashed !important;
	}

	/deep/ .u-border-top {
		border-color: rgba(22, 115, 255, 0.3) !important;
		border-top-style: dashed !important;
	}
</style>